<template>
    <div id="cards">
        <header>
            <router-link to="/index">
                <van-icon name="arrow-left" class="i1"/>
            </router-link>
            <h3>卡项详情</h3>
        </header>
       <main>
            <div class="first">
                <article>
                    <h2>{{cards.cardName}}/{{cards.price}}</h2>
                    <p>￥<span>{{cards.price}}</span>/{{cards.countAll}}次</p>
                    <b>永久有效</b>
                </article>
                <section>
                    <p class="p1">{{cards.cardName}}{{cards.countAll}}次/{{cards.price}}</p>
                    <p class="p3">{{cards.cardName}}</p>
                    <p class="p2">￥<span>{{cards.price}}</span></p>
                </section>
            </div>
            <div class="second">
                <h4>卡项内容</h4>
                <section>
                    <p>卡项权益</p>
                    <div class="equity">
                        <img :src="cards.cardEquitiesimg" alt="">
                        <div class="describe">
                            <p>{{cards.cardName}}</p>
                            <p><i>{{cards.countAll}}次</i>{{cards.cardEquities}}</p>
                        </div>
                    </div>
                </section>
            </div>
            <div class="third">
                <h4>使用说明</h4>
                <article>
                    <p>预约信息：请您提前30分钟预约</p>
                    <p>适用人数：每张团购券最多一人使用</p>
                    <p>适用人群：男女通用</p>
                </article>
            </div>
       </main>
       <footer>
            <router-link to="/index">
                <div>
                    <van-icon name="wap-home-o" class="i2"/>
                    <p>主页</p>
                </div>
        </router-link>
            <button @click="goto(cards)">立即购买</button>
       </footer>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Icon } from 'vant';
import { Button } from 'vant';
import axios from "axios"

Vue.use(Button);
Vue.use(Icon);
Vue.use(Swipe);
Vue.use(SwipeItem);
    export default {
        data() {
            return {
                current: 0,
                active:0,
                cards:[]
            };
        },
        methods: {
            onChange(index) {
                this.current = index;
            },
            async getCards(){
                // console.log(this.$route.query.id,"id");
                let res=await axios({
                    url:"http://192.168.20.106:8000/api/pro/cards?cardId="+this.$route.query.id,
                    // url:"http://192.168.20.249:8080/api/pro/cards?cardId=1",
                    method:"get",
                   
                })
                console.log(res,'res');
                this.cards=res.data.data
            },
            goto(item){
                this.$router.push({path:'/submitGoods',query:{item:item}})
            }

            },

             mounted(){
                    // console.log(111);
                    this.getCards()
            }
    }
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
img{
    display: block;
}
#cards{
    width: 100%;
    height: 100%;
    background: #ccc;
}
header{
    width: 100%;
    height: 44px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}
.i1{
    font-size: 20px;
    color: #888;
}
h3{
    font-size: 20px;
    font-weight: normal;
    margin-left: 10px;
    color: #888;
}
main{
    width: 100%;
    height: 100%;
    background:#f2f2f2;
    padding-top: 44px;
    padding-bottom: 44px;
    box-sizing: border-box;

}
.first{
    margin-bottom: 10px;
    background: #fff;
}
.first article{
    width: 100%;
    height: 200px;
    background: url(https://img2.baidu.com/it/u=3048033383,3549037764&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500) no-repeat;
    border-radius: 10px;
    color: #fff;
}
.first article h2{
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
    font-size: 20px;
}
.first article p{
    font-size: 14px;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 20px;
    font-weight: bolder;
}
.first article p>span{
    font-size: 24px;
}
.first article b{
    font-size: 12px;
    margin-left: 20px;
    font-weight: normal;
}
main .p1{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #333;
    font-weight: bolder;
}
.p2{
    width: 100%;
    color: #f41010;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
}
.p2 span{
    font-size: 24px;
    font-weight: bolder;
}
.p3{
    font-size: 12px;
    color: #666;
    margin: 10px 0;
}
.second{
    width: 100%;
    background: #fff;
    overflow: hidden;
}
h4{
    border-left: 2px solid #f41010;
    padding-left: 5px;
    color: #333;
    font-size: 18px;
    width: 100%;
    box-sizing: border-box;
    line-height: 20px;
    height: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
}
.second>section p{
    line-height: 20px;
    height: 20px;
    font-size: 16px;
    color: #333;
    width: 100%;
    font-weight: bolder;
}
.second>section .equity{
    width: 100%;
    display: flex;
    margin-top: 5px;
}
.second .equity img{
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin-right: 20px;
}
.first img{
    width: 100%;
    height: 350px;
}
.equity .describe p:nth-of-type(1){
    font-size: 14px;
    font-weight: bolder;
    color: #333;
    margin-bottom: 10px;
    margin-top: 10px;
}
.equity .describe p:nth-of-type(2){
    font-size: 12px;
    color: #666;
}
.equity .describe p:nth-of-type(2) i{
    color: #f41010;
    font-size: 14px;
    margin-right: 20px;
    font-style: normal;
}
.second{
    margin-bottom: 10px;
}
.third{
    width: 100%;
    background: #fff;
    overflow: hidden;

}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .third article p{
    color: #666;
    width: 100%;
  }
  footer{
    width: 100%;
    height: 44px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
footer>div{
    width: 50px;
    text-align: center;
}
footer .i2{
    font-size: 20px;
    color: #333;
}
footer p{
    line-height: 20px;
    height: 20px;
}
button{
    border:none;
    outline: none;
    background: none;
    background-color: #f41010;
    color: #fff;
    text-align: center;
    line-height: 30px;
    height: 30px;
    font-size: 18px;
    width: 300px;
    border-radius: 15px;
}
</style>